/* Page Structure
================= */

.content-container {
    padding: 0;
    background: none;
    width: 100%;
    min-height: 0;
}

.main-footer {
    border-top: none;
}


/* Attendance */

.attendance-circle {
    width: 171px;
    height: 170px;
    padding-top: 44px;
}


/* Bottom Links
===============*/

.bottom-content {
    position: absolute;
    bottom: 26px;
    width: 100%;
    font-size: 0;
    text-align: center;
}

.bottom-content .cp-content-wrap {
    display: inline-block;
    vertical-align: top;
    width: 162px;
    height: 55px;
    margin: 0 15px;
}

.bottom-content .cp-content-trigger {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 100%;
    background: #fff;
    border: 4px solid #ffbb00bb;
    font-size: 1.8rem;
    font-family: 'Roboto Slab', 'Hoefler Text', Constantia, Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    text-align: center;
    padding-top: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 10px;
}

.bottom-content .cp-content-trigger .cp-icon-wrap::before {
    position: absolute;
    top: -1px;
    left: 0;
    content: '';
    width: 0;
    height: calc(100% + 1px);
    background: #ffbb00bb;
    border-radius: 4px;
    transition: ease 0.2s width;
}

.bottom-content .cp-content-wrap:nth-of-type(1) .cp-content-trigger {
    padding-top: 6px;
}

.bottom-content .cp-content-trigger .cp-font-icon {
    position: absolute;
    right: 7px;
    top: 0;
    font-size: 3.9rem;
    color: #d3d6eb;
    height: 100%;
    line-height: 50px;
}

.bottom-content .cp-icon-name {
    position: relative;
    z-index: 10;
    font-weight: 700;
    color: #ffbb00bb;
    line-height: 1.1;
    transition: ease 0.2s color;
}

.bottom-content .cp-content-trigger:focus .cp-icon-wrap::before,
.bottom-content .cp-content-trigger:hover .cp-icon-wrap::before {
    width: 101%;
}

.bottom-content .cp-content-trigger:focus .cp-icon-name,
.bottom-content .cp-content-trigger:hover .cp-icon-name {
    color: #fff;
}

.bottom-content .cp-content-trigger:focus .cp-font-icon,
.bottom-content .cp-content-trigger:hover .cp-font-icon {
    color: #4255d1;
}

.bottom-content .cp-content-block {
    position: absolute;
    right: 50%;
    bottom: 75px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    height: 260px;
    max-width: 734px;
    width: 100%;
    background: #fff;
    border-radius: 20px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 26px;
    z-index: 700;
}

.bottom-content .cp-content-block::after {
    position: absolute;
    bottom: -20px;
    left: 58px;
    content: '';
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ffffff;
    transition: ease 0.2s bottom;
}

.bottom-content .cp-content-wrap:nth-of-type(2) .cp-content-block::after {
    left: 250px;
    border-top: 20px solid #f5f5f5;
}

.bottom-content .cp-content-wrap:nth-of-type(3) .cp-content-block::after {
    left: 445px;
    border-top: 20px solid #f5f5f5;
}

.bottom-content .cp-content-wrap:nth-of-type(4) .cp-content-block::after {
    left: 637px;
    border-top: 20px solid #f5f5f5;
}

.bottom-content .cp-trigger-active::after {
    display: block;
}

.bottom-content .cp-content-wrap:nth-of-type(1) .cp-content-block {
    padding-top: 28px;
}

.bottom-content .cp-content-wrap:nth-of-type(2) .cp-content-block,
.bottom-content .cp-content-wrap:nth-of-type(3) .cp-content-block {
    background: #f5f5f5;
}


/* CP Quicklinks
================*/

.cp-quicklinks {
    border-top: 3px solid #132bc5;
    height: 61px;
    padding-top: 11px;
    box-sizing: border-box;
    padding-right: 150px;
}

.cp-quicklinks li {
    margin: 0 36px;
}


/* Home Text */

.home-text {
    position: relative;
    display: inline-block;
    height: 147px;
    width: 100%;
    max-width: 690px;
    line-height: 1.3;
}

.home-text p {
    max-width: 690px;
    margin: 0 auto;
    line-height: 1.6;
    height: 83px;
    overflow: hidden;
}


/* Image Wrap
=============*/

.img-wrap {
    width: 100%;
    height: calc(100vh - 26px);
}


/* Updates Area
=============== */

.ps_activity_compact-date,
.ps_date {
    position: absolute;
    top: 127px;
    width: 100%;
    font-size: 1.5rem;
    color: #ffbb00a1;
    transition: ease 0.2s color;
}

.updates-area li {
    width: 278px;
    height: 212px;
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    margin: 0 36px;
    transition: ease 0.2s background;
}

.updates-area li:focus,
.updates-area li:hover {
    background: #ffbb00bb;
}

.updates-area li a {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    color: #000;
    font-size: 1.7rem;
    box-sizing: border-box;
    padding: 99px 10% 0;
    z-index: 10;
    transition: ease 0.2s color;
}

.updates-area li:nth-child(1) {
    float: left;
}

.updates-area li:focus a,
.updates-area li:hover a,
.updates-area li:focus::before,
.updates-area li:hover::before,
.updates-area li:focus .ps_activity_compact-date,
.updates-area li:focus .ps_date,
.updates-area li:hover .ps_activity_compact-date,
.updates-area li:hover .ps_date {
    color: #fff;
}

.updates-area li::before {
    position: absolute;
    top: 68px;
    display: block;
    width: 100%;
    font-family: 'Glyphter';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 3.5rem;
}

.updates-area li:nth-child(2)::before {
    top: 32px;
}

.read-more a {
    position: relative;
}

.updates-area li:nth-child(2) {
    height: 143px;
}

.updates-area li:nth-child(2) a {
    padding-top: 65px;
}

.updates-area li:nth-child(2) .ps_activity_compact-date,
.updates-area li:nth-child(2) .ps_date {
    top: 92px;
}

.read-more {
    position: absolute;
    right: 51px;
    bottom: 23px;
    width: 278px;
}

.read-more a {
    display: block;
    height: 49px;
    line-height: 49px;
    font-weight: 700;
    color: #fff;
    background: #ffbb00bb;
    transition: ease 0.2s background;
    border-radius: 10px;
    font-size: 1.7rem;
}

.read-more a .cp-font-icon {
    line-height: 49px;
    font-size: 2.2rem;
}